<template>
  <div style="width: auto">
    <el-cascader
      v-model="selectedOptions"
      :options="cascaderOptions"
      :props="cascaderProps"
      clearable
      @change="handleChange">
    </el-cascader>
  </div>
</template>

<script>
/**
 * 车间产线级联选择器
 */
export default {
  name: 'cascaderMultiWorkshopsLineSelect',
  props: {
    workshops: {  // 车间集合
      type: Array,
      required: true
    },
    lines: {  // 产线集合
      type: Array,
      required: true
    },
    docNo:{  //工单号
      type: String,
    },
    itemCode:{  // 品号
      type: String,
    },
    scheduleId:{  // 工单表ID
      type: String,
    },
    multipleFlg:{  // 是否多选
      type: Boolean,
    },
    checkStrictly:{
      type: Boolean,
    }
  },
  data() {
    return {
      selectedOptions: [],  // 选中的值
      cascaderOptions: [],  // 级联选择器的数据源
      cascaderProps: {  // 配置级联选择器的属性
        multiple: this.multipleFlg,  // 允许多选
        checkStrictly: this.checkStrictly,  // 允许选择任意一级
        expandTrigger:'hover'
      }
    };
  },
  created() {
    this.initCascaderOptions();  // 初始化级联选择器的数据
  },
  methods: {
    // 初始化级联选择器的数据
    initCascaderOptions() {
      this.cascaderOptions = this.workshops.map(workshop => {

        const children = this.lines
          .filter(line => line.workshopId === workshop.id)  // 过滤出属于当前车间的产线
          .map(line => ({ value: line.id, label: line.realityLineName }))  // 产线的ID和名称
        return{
          value: workshop.id,  // 车间的ID
          label: workshop.workshopName,  // 车间的名称
          children: children,
          disabled: children.length === 0  // 如果没有子项，父项禁用
        };
      });
    },
    // 选中值变化时的回调函数
    handleChange(value) {
      if(this.multipleFlg) {
        const selectedData = value.map(option => {
          const workshop = this.workshops.find(w => w.id === option[0]);  // 找到选中的车间
          const line = this.lines.find(l => l.id === option[1]);  // 找到选中的产线
          return {
            id: null,
            workshopId: workshop.id,  // 车间的ID
            workshopName: workshop.workshopName,  // 车间的名称
            productionLineId: line.id,  // 产线的ID
            productionLineName: line.realityLineName,  // 产线的名称
            docNo: this.docNo,
            itemCode: this.itemCode,
            scheduleId: this.scheduleId,
            scheduleNum: undefined,
            capacity: undefined,
            completeTime: null,
            dailyCompleteQty: 0,
            remainingQty: null,
            completeQty: 0,
            startDate: null,
            moStatus: '未生产'

          };
        });
        this.$emit('selection-change', selectedData);  // 发射事件，将选中的数据传递给父组件
      }else{
        const workshop = this.workshops.find(w => w.id === value[0]);  // 找到选中的车间
        const line = this.lines.find(l => l.id === value[1]);  // 找到选中的产线
        var workshopId = null;
        var workshopName = null;
        if(!this.validatenull(workshop)){
          workshopId = workshop.id;
          workshopName = workshop.workshopName;
        }
        var productionLineId = null;
        var productionLineName = null;
        if(!this.validatenull(line)){
          productionLineId = line.id;
          productionLineName = line.realityLineName;
        }
        const selectedData = {
          id: null,
          workshopId: workshopId,  // 车间的ID
          workshopName: workshopName,  // 车间的名称
          productionLineId: productionLineId,  // 产线的ID
          productionLineName: productionLineName,  // 产线的名称
          docNo: this.docNo,
          itemCode: this.itemCode,
          scheduleId: this.scheduleId,
          scheduleNum: undefined,
          startDate: null,
          moStatus: '未生产'
        };
        this.$emit('selection-change', selectedData);  // 发射事件，将选中的数据传递给父组件
      }
    },
    // 清空选择
    clearSelection() {
      this.selectedOptions = [];
      // this.$emit('selection-cleared');  // 可选：发射一个事件通知父组件选择已清空
    }
  }
};
</script>

<style scoped>
/* 你可以在这里添加样式 */
</style>
